<template>
  <el-dialog :visible.sync="value" :before-close="onClickCancel">
    <template slot="title">
      {{isCreated ? '添加' : '编辑'}}现金网方案设置
    </template>
    <el-form :model="$data" :rules="refRule" ref="refForm">
      <el-form-item label="方案名称" prop="name">
        <el-col :span="16">
          <el-input
            v-model="name"
            :readonly="isReadonly"
            @keyup.enter.native="onClickConfirm"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-button
        type="primary"
        size="mini"
        @click="onClickAddItem"
      >
        添加条件
      </el-button>

      <el-table
        :data="tableData"
        ref="refTable"
        border>
        <el-table-column label="公司总输赢" align="center">
          <template slot-scope="{row}">
            <el-form-item class="form-item-view">
              <span>>=</span>
              <el-input-number
                @keyup.enter.native="onClickConfirm"
                class="edit-input"
                v-model="row.profit"
                :step="1000"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="userCount" label="有效会员数" align="center">
          <template slot-scope="{row}">
            <el-form-item class="form-item-view">
              <span>>=</span>
              <el-input-number
                @keyup.enter.native="onClickConfirm"
                class="edit-input"
                v-model="row.userCount"
                :min="0"
                :precision="0"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="返佣比例(%)" align="center">
          <template slot-scope="{row}">
            <el-form-item class="form-item-view">
              <el-input-number
                @keyup.enter.native="onClickConfirm"
                class="edit-input"
                v-model="row.commission"
                :min="0"
                :max="100"
                :precision="0"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template slot-scope="{row,$index}">
            <el-button type="text" @click="onClickDeleteItem(row, $index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClickCancel">取 消</el-button>
      <el-button
        type="primary"
        @click="onClickConfirm"
        :disabled="disabledConfirm"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

// utils
import { compareProps } from '@/utils/base';

// mixins
import { form, factory } from '@/build';

// services
import { getCommissionCaseDetails, updateCommissionCaseDetails } from '@/services/api/commission';

export default {
  name: 'commission-program-setting-dialog',
  props: ['value', 'id', 'rowData'],
  mixins: [form, factory],
  data() {
    return {
      name: null,
      tableData: [],
      refRule: {
        name: [
          { required: true, message: '方案名称不能为空' },
          { max: 45, message: '方案名称不能超过45个字' },
        ],
      },
    };
  },
  computed: {
    isCreated() {
      return !this.id;
    },
    isReadonly() {
      return this.id && this.rowData.id === 1;
    },
    disabledConfirm() {
      return !(Array.isArray(this.tableData) && !!this.tableData.length && this.name);
    },
  },
  mounted() {
    if (this.rowData.name) {
      this.name = this.rowData.name;
    }
    if (this.id) {
      this.bindGet(getCommissionCaseDetails, 'tableData', {
        sendingData: { id: this.id },
      });
      this.getAll();
    }
    this.bindSave(updateCommissionCaseDetails, 'saveForm', 'tableData', {
      beforeSend: data => ({
        commList: data,
        id: this.id,
        name: this.name,
      }),
      afterSuccess: () => {
        this.onClickCancel();
        this.$parent.getAll();
      },
    });
  },
  methods: {
    async onClickConfirm() {
      this.tableData = this.tableData.sort(compareProps('commission'));
      this.$nextTick(() => {
        this.doSave({ action: 'saveForm', form: 'refForm' });
      });
    },
    onClickAddItem() {
      this.tableData = [
        ...this.tableData || [],
        {
          commission: 0,
          commissionLimit: 0,
          profit: 0,
          userCount: 1,
        },
      ];
    },
    onClickDeleteItem(data, index) {
      this.tableData = this.tableData.filter((v, i) => i !== index);
    },
    onClickCancel() {
      this.$emit('input', false);
    },
  },

};
</script>

<style lang="scss">
  .form-item-view {
    margin-bottom: 0 !important;
    > div {
      display: flex;
      align-items: center;
      >span {
        min-width: 40px;
        flex: 0;
      }
    }
    .el-form-item__content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
